﻿import QtQuick 2.12
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14

// 级联选择器
Item {

    id: root

    // public ==============================================================

    property var model1: ["1级01", "2级02", "3级03"]     // 1维数组
    property var model2: [["2级01", "2级02"], ["2级03", "2级04", "2级04", "2级05", "2级06"], []]     // 2维数组
    property var model3: [[["3级01"]], [["3级02"]]]     // 3维数组

    property int index1: -1
    property int index2: -1
    property int index3: -1



    // 文本框样式
    height: 40*dp
    property int editWidth: 180*dp
    property int titleWidth: title === "" ? 0 : 80*dp
    property string title: ""
    property bool required: false
    property bool editable: true

    // 下拉弹窗样式
    property real maxPopupListCount: 4

    property real popupWidth: 140*dp
    property real popupListItemHeight: 40*dp



    // private =============================================================

    property bool popupVisible: false

    width: titleWidth + editWidth

    // 标题
    Item{
        height: parent.height
        Text{
            text: title
            font.pixelSize: config.fontsize
            anchors.verticalCenter: parent.verticalCenter
        }
    }

    ComboBox{
        id: control
        height: root.height; width: editWidth
        x: titleWidth

        // 显示框文本样式
        contentItem: Text{
            text: (index1!==-1 ? (model1[index1]) : "") + (index2!==-1 ? ( " / " + model2[index1][index2]) : "") + (index3!==-1 ? (" / " + model3[index1][index2][index3]) : "")
            leftPadding: 10*dp
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: config.fontsize
        }

        // 显示框背景样式
        background: Rectangle{

            anchors.fill: parent
            border.color: "#CCCCCC"
            radius: 3*dp
        }

        // 3个popup写在一个里面吧
        popup: Popup{
            width: (1 + (popup2.visible?1:0) + (popup3.visible?1:0)) * popupWidth
            height: Math.max(popup1.height, popup2.height, popup3.height)
            y: control.height + 2*dp
            padding: 0
            background: Rectangle{
                anchors.fill: parent
                layer.enabled: true
                layer.effect: DropShadow {
                    radius: 14*dp
                    samples: 43
                    transparentBorder: true
                    color: "#22444444"
                }
            }

            contentItem: Rectangle{
                clip: true
                Rectangle{
                    id: popup1
                    height: Math.min(model1.length, maxPopupListCount) * popupListItemHeight
                    width: popupWidth

                    property var model: model1

                    ListView{
                        anchors.fill: parent
                        model: popup1.model.length
                        delegate: CustomComboPopupListItemDelegate{
                            height: popupListItemHeight
                            width: parent.width
                            title: popup1.model[index]
                            isChecked: index1 === index
                            onClicked: {
                                index3 = -1
                                index2 = -1
                                index1 = index
                            }
                        }
                    }
                }Rectangle{

                    id: popup2

                    visible: index1 !== -1 && model2.length > index1 && model2[index1].length > 0

                    property var model: visible ? model2[index1] : []

                    height: popup2.model.length * popupListItemHeight

                    width: popupWidth
                    x: popupWidth

                    ListView{
                        anchors.fill: parent
                        model: popup2.model.length
                        delegate: CustomComboPopupListItemDelegate{
                            height: popupListItemHeight
                            width: parent.width
                            title: popup2.model[index]
                            isChecked: index2 === index
                            onClicked: {
                                index3 = -1
                                index2 = index
                            }
                        }
                    }


                }Rectangle{

                    id: popup3

                    visible: index2 !== -1 && model3[index1].length > index2 && model3[index1][index2].length > 0

                    property var model: visible ? model3[index1][index2] : []

                    height: popup3.model.length * popupListItemHeight

                    width: popupWidth
                    x: popupWidth * 2

                    ListView{
                        anchors.fill: parent
                        model: popup3.model.length
                        delegate: CustomComboPopupListItemDelegate{
                            height: popupListItemHeight
                            width: parent.width
                            title: popup3.model[index]
                            isChecked: index3 === index
                            onClicked: {
                                index3 = index
                            }
                        }
                    }

                }

            }

            // 过渡效果
            enter: Transition {
                NumberAnimation {
                    property: "height"
                    from: 0
                    to: Math.max(popup1.height, popup2.height, popup3.height)
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
            exit: Transition {
                NumberAnimation {
                    property: "height"
                    from: Math.max(popup1.height, popup2.height, popup3.height)
                    to: 0
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }

        }

    }



}
